import React, { Component } from 'react';
import AgencyList from './agency-list';

class agency extends Component {
    state={
        filter:'all',
        list:[
            {
                title:'a1',
                stateVal:false
            },
            {
                title:'a2',
                stateVal:true
            }
        ],
        inputVal:'1000'
    };

    //添加代办项并触发list重新渲染
    addTodo = ()=>{
        let arr = this.state.list;
        if(this.state.inputVal){
            arr.push({
                title:this.state.inputVal
            });
        }
        this.setState({
            list:arr,
            inputVal:''
        });
    };
    //实时设置state
    inputEvent = (e)=>{
        this.setState({
            inputVal:e.target.value
        })
    };
    liHandle(index){
        let arr = this.state.list;
            arr[index].stateVal = !arr[index].stateVal;
            this.setState({
                list:arr
            })
    };
    //点击按钮后更改状态(过滤掉完成的事项)
    changeState = ()=>{
        this.setState({
            filter:'end'
        });
    };
    render() {
        //过滤状态
        let list = this.state.list.map((data,index) =>{
            if(this.state.filter == 'ing' && data.stateVal){
                return  <AgencyList key={index} click={()=>this.liHandle(index)} stateVal={data.stateVal} title={data.title} />
            }else if(this.state.filter == 'end' && !data.stateVal){
                return  <AgencyList key={index} click={()=>this.liHandle(index)} stateVal={data.stateVal} title={data.title} />
            }else if(this.state.filter == 'all'){
                return  <AgencyList key={index} click={()=>this.liHandle(index)} {...data} />
            }
        });

        return (
            <div className="page">
                <button onClick={this.changeState}>更改状态</button>
                <div><input value={this.state.inputVal} onChange={this.inputEvent} type="text"/><button onClick={this.addTodo}>click</button></div>
                <ul>
                    {list}
                </ul>
            </div>
        );
    }
}

export default agency;

